<template>
	<view class="pet-info-page">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-container">
			<!-- 宠物信息卡片 -->
			<view class="info-container">
				<view class="info-header">
					<text class="section-heading">基本信息</text>
				</view>

				<view class="info-content">
					<!-- 左侧头像区域 -->
					<view class="avatar-section">
						<view class="avatar-container">
							<image class="avatar" :src="petInfo.avatar" @click="chooseAvatar">
							</image>
							<text class="edit-avatar">修改头像</text>
						</view>
					</view>

					<!-- 右侧表单区域 -->
					<view class="form-section">
						<view class="form-container">
							<view class="form-row">
								<view class="form-item">
									<text class="label">宠物昵称</text>
									<input class="input" v-model="petInfo.petName" placeholder="请输入宠物昵称" />
								</view>
								<view class="form-item">
									<text class="label">宠物种类</text>
									<picker class="picker" :range="petTypes" @change="petTypeChange">
										<view class="picker-text">{{ petInfo.petType || '请选择宠物种类' }}</view>
									</picker>
								</view>
							</view>

							<view class="form-row">
								<view class="form-item">
									<text class="label">宠物体重 (kg)</text>
									<input class="input" v-model="petInfo.petWeight" type="digit"
										placeholder="请输入宠物体重" />
								</view>
								<view class="form-item">
									<text class="label">宠物年龄</text>
									<view class="age-container">
										<input class="input age-input" v-model="petInfo.petAge" type="number"
											placeholder="年龄" />
										<picker class="picker age-unit-picker" :range="ageUnits"
											@change="ageUnitChange">
											<view class="picker-text">{{ petInfo.ageUnit }}</view>
										</picker>
									</view>
								</view>
							</view>

							<view class="form-item full-width">
								<text class="label">备注信息</text>
								<textarea class="textarea" v-model="petInfo.notes" placeholder="宠物的其他信息，如性格特点、喜好等" />
							</view>
						</view>
					</view>
				</view>

				<view class="action-section">
					<button class="save-btn" @click="savePetInfo">保存修改</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		userApi
	} from '@/api/user';

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				petInfo: '',
				globaApi: '',
				petTypes: ['猫咪', '狗狗'],
				ageUnits: ['岁', '月', '周'],
				healthRecords: [],
				userId: ''
			};
		},
		mounted() {
			this.userId = uni.getStorageSync('userId')

			this.getPetInfo()
		},
		methods: {
			async getPetInfo() {
				try {
					const result = await userApi.getPetInfo({
						userId: this.userId
					})

					this.petInfo = result || ''
					// this.petInfo.ageUnit = '岁'
					// this.petInfo.petName = result.petName
					// this.petInfo.avatar = result.avatar
					// this.petInfo.petType = result.petType
					// this.petInfo.petAge = result.petAge
					// this.petInfo.notes = result.notes
					// this.petInfo.petWeight = result.petWeight
					console.log('获取宠物信息成功：', result);
				} catch (error) {
					uni.showToast({
						title: '获取用宠物信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取用宠物信息失败：', error);
				}
			},
			// 选择头像
			async chooseAvatar() {
				try {
					const {
						tempFilePaths
					} = await uni.chooseImage({
						count: 1, // 一次只选择一张图片
						sizeType: ['compressed'], // 压缩图片，减少上传数据量
						sourceType: ['album', 'camera'] // 支持从相册选择或使用相机拍照
					});
					// 判断是否选择了图片
					if (tempFilePaths && tempFilePaths.length > 0) {
						// 显示上传中提示
						uni.showLoading({
							title: '上传中...'
						});

						// 2. 调用上传头像接口
						const result = await userApi.uploadAvatar(tempFilePaths[0]);

						// 3. 更新用户信息
						this.petInfo.avatar = result[0]
						console.log(this.petInfo.avatar);
						this.savePetInfo()
						this.getPetInfo();


						// 提示上传成功
						uni.showToast({
							title: '头像更新成功'
						});
					}
				} catch (error) {
					console.error('上传头像失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '上传失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
				}

			},
			// 宠物种类选择
			petTypeChange(e) {
				const index = e.detail.value;
				this.petInfo.petType = this.petTypes[index];
			},

			// 年龄单位选择
			ageUnitChange(e) {
				const index = e.detail.value;
				this.petInfo.ageUnit = this.ageUnits[index];
			},

			// 保存宠物信息
			async savePetInfo() {
				// 表单验证
				if (!this.petInfo.petName) {
					uni.showToast({
						title: '宠物昵称不能为空',
						icon: 'none'
					});
					return;
				}

				if (!this.petInfo.petType) {
					uni.showToast({
						title: '请选择宠物种类',
						icon: 'none'
					});
					return;
				}

				// 体重验证
				if (this.petInfo.petWeight && isNaN(parseFloat(this.petInfo.petWeight))) {
					uni.showToast({
						title: '体重必须是数字',
						icon: 'none'
					});
					return;
				}

				// 年龄验证
				if (this.petInfo.petAge && isNaN(parseInt(this.petInfo.petAge))) {
					uni.showToast({
						title: '年龄必须是数字',
						icon: 'none'
					});
					return;
				}

				try {
					console.log(this.petInfo);
					const result = await userApi.updatePetByUserId(this.petInfo)
					console.log(result);
					uni.showLoading({
						title: '保存中...'
					});
					uni.showLoading({
						title: '保存成功'
					});
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				} catch (error) {
					console.error('保存失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '保存失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
				}
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goShopCar() {
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				})
			},
		}
	};
</script>

<style scoped>
	.pet-info-page {
		font-family: 'Microsoft YaHei', Arial, sans-serif;
		color: #333;
		background-color: #f5f5f5;
	}

	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}


	.page-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 30px;
		min-height: 100vh;
	}

	.info-container {
		margin-top: 270rpx;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		margin-bottom: 30px;
	}

	.info-header {
		padding: 20px 30px;
		border-bottom: 1px solid #eee;
		background-color: #fcfcfc;
	}

	.section-heading {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.info-content {
		display: flex;
		padding: 30px;
	}

	/* 左侧头像区域 */
	.avatar-section {
		flex: 1;
		max-width: 250px;
		padding-right: 40px;
	}

	.avatar-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		margin-bottom: 20px;
		border: 2px solid #f0f0f0;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	.avatar:hover {
		transform: scale(1.05);
		cursor: pointer;
	}

	.edit-avatar {
		font-size: 14px;
		color: #F9CB43;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.edit-avatar:hover {
		color: #e8b625;
		text-decoration: underline;
	}

	/* 右侧表单区域 */
	.form-section {
		flex: 3;
	}

	.form-container {
		width: 100%;
	}

	.form-row {
		display: flex;
		margin-bottom: 20px;
		gap: 30px;
	}

	.form-item {
		flex: 1;
		margin-bottom: 20px;
	}

	.full-width {
		width: 100%;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.input,
	.picker {
		width: 100%;
		height: 42px;
		background-color: #f8f8f8;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		padding: 0 15px;
		font-size: 14px;
		transition: border-color 0.3s ease, box-shadow 0.3s ease;
	}

	.input:focus,
	.picker:focus,
	.textarea:focus {
		border-color: #F9CB43;
		box-shadow: 0 0 0 2px rgba(249, 203, 67, 0.2);
		outline: none;
	}

	.picker {
		display: flex;
		align-items: center;
	}

	.picker-text {
		font-size: 14px;
		color: #333;
	}

	.age-container {
		display: flex;
		gap: 10px;
	}

	.age-input {
		flex: 2;
	}

	.age-unit-picker {
		flex: 1;
	}

	.textarea {
		width: 100%;
		height: 120px;
		background-color: #f8f8f8;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		padding: 15px;
		font-size: 14px;
		line-height: 1.5;
		resize: vertical;
		transition: border-color 0.3s ease, box-shadow 0.3s ease;
	}

	/* 按钮区域 */
	.action-section {
		padding: 20px 30px;
		border-top: 1px solid #eee;
		background-color: #fcfcfc;
		text-align: right;
	}

	.save-btn {
		min-width: 120px;
		height: 42px;
		background-color: #F9CB43;
		color: white;
		border-radius: 5px;
		border: none;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
	}

	.save-btn:hover {
		background-color: #e8b625;
		transform: translateY(-2px);
	}

	.save-btn:active {
		transform: translateY(0);
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.info-content {
			flex-direction: column;
		}

		.avatar-section {
			max-width: 100%;
			padding-right: 0;
			padding-bottom: 30px;
			margin-bottom: 20px;
			border-bottom: 1px solid #eee;
		}

		.form-row {
			flex-direction: column;
			gap: 0;
		}

		.page-container {
			padding: 15px;
		}

		.info-container {
			border-radius: 8px;
		}
	}
</style>